<template>
  <div>
      <el-row type="flex" justify="start">
          <el-col :span="9">
            <el-button type="primary" @click="addDialogForm">新增</el-button>
            <el-dialog :title="dialogtitle" :visible.sync="dialogFormVisible">
            <el-form :model="form" :rules="rules" ref="form">
                <el-form-item label="日期" :label-width="formLabelWidth" prop="date">
                    <!-- <el-input v-model="form.date" auto-complete="off"></el-input> -->
                    <el-date-picker v-model="form.date" placeholder="选择日期" :picker-options="pickerOptions" class="date"></el-date-picker>
                </el-form-item>
                <el-form-item label="姓名" :label-width="formLabelWidth" prop="name">
                    <el-input v-model="form.name" auto-complete="off"></el-input>
                </el-form-item>
                <el-form-item label="地址" :label-width="formLabelWidth" prop="address">
                    <el-input v-model="form.address" auto-complete="off"></el-input>
                </el-form-item>
            </el-form>    
            <div slot="footer" class="dialog-footer">
                <el-button @click="dialogFormVisible = false">取 消</el-button>
                <el-button type="primary" @click="dialogtitle==='新增用户'?submitForm('form'):editSubmitForm()">确 定</el-button>
            </div>
        </el-dialog>
          </el-col>
      </el-row>
      <el-row type="flex" justify="center">
          <el-col :span="16">
               <el-table :data="tableData" border style="width: 100%">
            <el-table-column prop="userId" label="项目代码" width="180" align="center"></el-table-column>
            <el-table-column prop="username" label="项目组名称" width="180" align="center"></el-table-column>
            <el-table-column prop="password" label="生效" align="center"></el-table-column>
            <el-table-column prop="edit" label="编辑" align="center">
                <template slot-scope="scope">
                    <el-button @click="handleClick(scope.row)" type="text" size="small">删除</el-button>
                    <el-button type="text" size="small" @click="editDialogForm(scope.row)">编辑</el-button>
                </template>
            </el-table-column>
        </el-table>
          </el-col>
       
      </el-row>
      
      
  </div>
</template>

<script>
import axios from "axios";
export default {
  name: "User",
  data() {
    return {
      tableData: [],
      dialogFormVisible: false,
      form: {
        date: "",
        name: "",
        address: ""
      },
      formLabelWidth: "120px",
      dialogtitle: "新增用户",
      delId: 0,
      rules: {
        date: [{ required: true, message: "请输入日期", trigger: blur }],
        name: [{ required: true, message: "请输入姓名", trigger: blur }],
        address: [{ required: true, message: "请输入地址", trigger: blur }]

      },
      pickerOptions1: {
          disabledDate(time) {
            return time.getTime() > Date.now()
          }
      }
    }
  },
  methods: {
    handleClick(row) {
      var mythis = this;
      this.$confirm("此操作将永久删除该条记录, 是否继续?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning"
      })
        .then(() => {
          axios.get("userapi/userdel?id=" + row.id).then(function(res) {
            //console.log(res)
            mythis.getUserList();
          });
          this.$message({
            type: "success",
            message: "删除成功!"
          });
        })
        .catch(() => {
          this.$message({
            type: "info",
            message: "已取消删除"
          });
        });
    },
    addDialogForm() {
      this.dialogFormVisible = true;
      this.form.date = "";
      this.form.name = "";
      this.form.address = "";
      this.dialogtitle = "新增用户";
    },
    editDialogForm(row) {
      this.dialogFormVisible = true;
      this.dialogtitle = "用户编辑";
      this.form.date = row.date;
      this.form.name = row.name;
      this.form.address = row.address;
      this.delId = row.id;
    },
    editSubmitForm() {
      //console.log("更改方法被调用")
      var mythis = this;
      axios
        .post("userapi/userupdate/" + this.delId, {
          date: this.form.date,
          name: this.form.name,
          address: this.form.address
        })
        .then(function(res) {
          //console.log(res)
          //location.reload(true)
          mythis.getUserList();
        });
      this.$message({
        message: "修改一条记录",
        type: "success"
      });
      this.dialogFormVisible = false;
    },
    getUserList() {
      console.log("getuserlist方法被调用");
      axios.get("/user/list").then(this.handlerUserSucc);
    },
    handlerUserSucc(res) {
      res = res.data;
      if (res.code === 200) {
        const data = res.data;
        this.tableData = data;
        console.log(data);
      }
    },
    submitForm(formName) {
      this.$refs[formName].validate(valid => {
        if (valid) {
          var mythis = this;
          axios
            .post("/userapi/usersave", {
              date: this.form.date,
              name: this.form.name,
              address: this.form.address
            })
            .then(function(res) {
              console.log(res.data.message);
              mythis.getUserList();
            });
          this.dialogFormVisible = false;
          this.$message({
            message: "新增一条记录",
            type: "success"
          });
        } else {
          return false
        }
      });

      //location.reload(true)
    }
  },
  mounted() {
    this.getUserList();
  }
};
</script>
<style scoped>
.add {
  float: left;
}
.date {
    float: left;
}
</style>
